import React, { useEffect, useRef } from 'react';
import { getSdk } from '../bpm-sdk';
const ThirdForm = () => {
  const formRef = useRef<HTMLFormElement>(null);
  const sdk = getSdk();
  const getFormData = (needValid?: boolean) => {
    if (formRef.current) {
      const formData = new FormData(formRef.current);
      const company = formData.get('company');
      const link = formData.get('link');
      const title = formData.get('title');
      const location = formData.getAll('location');
      const jobType = formData.get('jobType');
      const department = formData.get('department');

      if (needValid) {
        // 执行对应表单数据校验，校验通过后才返回表单数据
        console.log('执行必填校验了');
      }

      const data = {
        company,
        link,
        title,
        location,
        jobType,
        department,
      };
      console.log(data);
      return data;
    }
  };

  useEffect(() => {
    sdk.setFormData(getFormData);
  }, [getFormData]);

  return (
    <div className="max-w-6xl px-12 py-20 mx-auto mb-24 bg-white bg-gray-100 shadow-xl lg:px-24">
      <form ref={formRef}>
        <div className="flex flex-col px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md">
          <div className="mb-6 -mx-3 md:flex">
            <div className="px-3 mb-6 md:w-1/2 md:mb-0">
              <label
                className="mb-2 text-xs font-bold tracking-wide text-black uppercase"
                htmlFor="company"
              >
                公司名称
              </label>
              <input
                className="w-full px-4 py-3 mb-3 text-black bg-gray-200 border border-gray-200 rounded"
                id="company"
                name="company"
                type="text"
                placeholder="魔晶"
              />
            </div>
            <div className="px-3 md:w-1/2">
              <label
                className="mb-2 text-xs font-bold tracking-wide text-black uppercase"
                htmlFor="title"
              >
                职位
              </label>
              <input
                className="w-full px-4 py-3 mb-3 text-black bg-gray-200 border border-gray-200 rounded"
                name="title"
                type="text"
                placeholder="工程师"
              />
            </div>
          </div>
          <div className="mb-6 -mx-3 md:flex">
            <div className="px-3 md:w-full">
              <label
                className="mb-2 text-xs font-bold tracking-wide text-black uppercase"
                htmlFor="link"
              >
                申请链接
              </label>
              <input
                className="w-full px-4 py-3 mb-3 text-black bg-gray-200 border border-gray-200 rounded"
                name="link"
                type="text"
                placeholder="http://...."
              />
            </div>
          </div>
          <div className="mb-2 -mx-3 md:flex">
            <div className="px-3 mb-6 md:w-1/2 md:mb-0">
              <label
                className="mb-2 text-xs font-bold tracking-wide text-black uppercase"
                htmlFor="location"
              >
                地址
              </label>
              <div>
                <select
                  className="w-full px-4 py-3 pr-8 mb-3 text-xs text-black bg-gray-200 border border-gray-200 rounded"
                  name="location"
                >
                  <option>成都</option>
                  <option>上海</option>
                  <option>北京</option>
                </select>
              </div>
            </div>
            <div className="px-3 md:w-1/2">
              <label
                className="mb-2 text-xs font-bold tracking-wide text-black uppercase"
                htmlFor="jobType"
              >
                工作类型
              </label>
              <div>
                <select
                  className="w-full px-4 py-3 pr-8 mb-3 text-xs text-black bg-gray-200 border border-gray-200 rounded"
                  name="jobType"
                >
                  <option>全职</option>
                  <option>兼职</option>
                  <option>实习</option>
                </select>
              </div>
            </div>
            <div className="px-3 md:w-1/2">
              <label
                className="mb-2 text-xs font-bold tracking-wide text-black uppercase"
                htmlFor="department"
              >
                岗位
              </label>
              <div>
                <select
                  className="w-full px-4 py-3 pr-8 mb-3 text-xs text-black bg-gray-200 border border-gray-200 rounded"
                  name="department"
                >
                  <option>工程师</option>
                  <option>设计师</option>
                  <option>技术支持</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  );
};

export default ThirdForm;
